<template>
    <div class="content">
        <SearchTitle />
        <div class="CenterBox">
            <div class="fhanBox" @click="fanhuifun">&lt;返回</div>
            <el-card>
                <div class="spxqTopFlexBox">
                    <div class="spxqTopLeft">
                        <div class="lbtztBox">
                            <img class="imgLeftTriggerBox" :src="fengmianBox" alt="">
                        </div>
                        <div style="width: 100%;">
                            <spImgQh :products="formData.ProductPictureData" @selectedChange="tpqhFun"></spImgQh>
                        </div>
                    </div>
                    <div class="spxqTopRight">
                        <div class="TitleBox">{{ formData.name }}</div>
                        <div class="spxqTopRight_jbxx">
                            <div class="priceBox">￥{{ formData.price }}</div>
                            <div class="spxqTopRight_text">
                                <span class="spxqTopRight_lable">起订量:</span>
                                <span class="spxqTopRight_nrText">{{ formData.min_quantity }}</span>
                            </div>
                            <!-- <div class="spxqTopRight_text">
                                <span class="spxqTopRight_lable">时间:</span>
                                <span class="spxqTopRight_nrText">{{ formData.eff_time }} ~ {{ formData.exp_time }}</span>
                            </div> -->
                        </div>
                        <div class="spxqTopRight_dizhi">
                            <span class="spxqTopRight_lable">地址:</span>
                            <span class="spxqTopRight_nrText">{{ formData.address }}</span>
                        </div>
                        <div class="spxqTopRight_button">
                            <div class="spxqTopRight_bddh" @click="bddhfun">拨打电话</div>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card style="margin-top: 20px;">
                <div class="nrTitleBox">商品详情</div>
                <div class="nrFlexBox">
                    <div class="nrForBox" v-for="item in formData.guiges" :key="item.index">
                        <div class="nrForBoxLabel">{{ item.canshu_name }}：</div>
                        <div class="nrForBoxValue">{{ item.canshu_content }}</div>
                    </div>
                </div>
                <div style="width: 90%;margin: 0 auto;margin-top: 20px;" 
                    v-for="item in formData.spxxInfo" :key="item.id">
                    <img style="width: 100%;" :src="store.imgfengMian + item.url" alt="">
                </div>
            </el-card>
        </div>
    </div>
</template>
<script setup>
import SearchTitle from '@/components/general/SearchTitle.vue';
import { queryProductInfo } from '@/api/api.js'
import spImgQh from '@/components/general/spImgQh.vue';
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
const router = useRouter();
const route = useRoute();
import { useStore } from '@/store/store';
const store = useStore()
onMounted(() => {
    if (route.query.id) {
        queryProductInfofun(route.query.id)
    }
})
const fengmianBox = ref('');
// 图片切换
const tpqhFun = (item) => {
    fengmianBox.value = item.filePath;
}
const formData = ref({
    guiges: [],
    ProductPictureData: [],
    spxxInfo: [],
});
const queryProductInfofun = async (id) => {
    const res = await queryProductInfo(id);
    if (res.code === 200) {
        formData.value = {
            ...formData.value,
            ...res.result.info
        };
        // 商品规格
        formData.value.guiges = res.result.guiges;
        res.result.photoTypes.forEach((item, index) => {
            if (item.AttachmentType === 'ProductPicture') {
                formData.value.ProductPictureData = item.Files.map((item, index) => {
                    return {
                        ...item,
                        url: item.url == 'UpLoadFiles/shop.png'?`https://image.pollinations.ai/prompt/${formData.value.name.split('、')[0]}`:store.imgfengMian + item.url
                    }
                })
            }
            if (item.AttachmentType === 'Info') {
                formData.value.spxxInfo = item.Files.map((item, index) => {
                    return {
                       ...item,
                        url: item.url == 'UpLoadFiles/shop.png'?`https://image.pollinations.ai/prompt/${formData.value.name.split('、')[0]}`:store.imgfengMian + item.url
                    }
                })
            }
        })
        fengmianBox.value = formData.value.ProductPictureData[0]?.url || '';
    } else {
        return null;
    }
}
// 拨打电话
const bddhfun = () => {

};
// 返回
const fanhuifun = () => {
    router.go(-1);
};
</script>
<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    // min-height: calc(100vh - 60px);
    min-height: 100vh;
    background-size: 100%;
    background-color: #f3f9fe;
}

.fhanBox {
    font-size: 16px;
    color: #767879;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
        color: $green-color;
    }
}

.spxqTopFlexBox {
    display: flex;
    gap: 20px;

    .spxqTopLeft {
        // flex: 0 0 calc(33% - 10px);
        width: calc(33% - 10px);
        display: flex;
        flex-direction: column;
        align-items: center;

        .lbtztBox {
            width: 100%;
            height: 100%;
            margin-bottom: 10px;
        }

        .imgLeftTriggerBox {
            width: 100%;
            height: 100%;
        }
    }

    .spxqTopRight {
        // flex: 0 0 calc(67% - 10px);
        width: calc(67% - 10px);

        .TitleBox {
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            margin: 16px 0;
        }

        .spxqTopRight_jbxx {
            padding: 10px;
            background: #F5F5F5;
            border-radius: 8px;

            .priceBox {
                font-weight: bold;
                font-size: 30px;
                color: #FF1A1A;
                margin-bottom: 10px;
            }

            .spxqTopRight_text {
                margin-top: 10px;
                font-size: 14px;

            }
        }

        .spxqTopRight_dizhi {
            width: 96%;
            margin: 0 auto;
            margin-top: 12px;
            padding: 10px 0;
            border-bottom: 2px solid #CCCCCC;
            font-size: 14px;
        }

        .spxqTopRight_lable {
            color: #848691;
            margin-right: 10px;
        }

        .spxqTopRight_nrText {
            color: #1F1F1F;
        }

        .spxqTopRight_button {
            display: flex;
            width: 96%;
            margin: 0 auto;
            margin-top: 40px;

            .spxqTopRight_bddh {
                padding: 10px 30px;
                background: #F02B2B;
                border-radius: 6px;
                font-size: 14px;
                color: #FFFFFF;

            }
        }
    }
}

.nrTitleBox {
    font-weight: bold;
    font-size: 20px;
    color: #333333;
}

.nrFlexBox {
    margin-top: 20px;

    .nrForBox {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-bottom: 10px;

        .nrForBoxLabel {
            color: #7C7C7C;
            width: 12%;
        }

        .nrForBoxValue {
            color: #000000;
            width: 88%;
        }
    }
}
</style>